<template>
	<view class="scroll_tab">
		<u-tabs :keyName="keyName" :current="current" :list="Cuts" :scrollable="scrollable" :lineColor="barStyle"
			:lineWidth="lineWidth" :lineHeight="lineHeight"
			:activeStyle="{ color:color,'font-size':activeSize+'rpx', transform: 'scale(1.05)', fontWeight: 'bold' }"
			:inactiveStyle="{ color: inactiveColor,'font-size':size+'rpx', transform: 'scale(1)' }"
			:itemStyle="{height:height+'px','padding-left':gutter+'px','padding-right':gutter+'px'}"
			@change="changType"></u-tabs>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// current:0,
			}
		},
		props: { // 是否浮动
			IsFloat: {
				type: Boolean,
				default: false
			},
			keyName: {
				type: String,
				default: 'name'
			},
			Cuts: {
				type: Array,
				default: () => []
			},
			gutter: {
				type: Number,
				default: 10
			},
			color: {
				type: String,
				default: '#3a8dfa'
			},
			height: {
				type: Number,
				default: 35
			},
			bgcolor: {
				type: String,
				default: 'transparency'
			},
			barStyle: {
				type: String,
				default: '#3a8dfa'
			},
			scrollable: {
				type: Boolean,
				default: true
			},
			size: {
				type: Number,
				default: 28
			},
			activeSize: {
				type: Number,
				default: 28
			},
			current: {
				type: Number,
				default: 0
			},
			// 滑块宽度
			lineWidth: {
				type: [String, Number],
				default: 20
			},
			// 滑块高度
			lineHeight: {
				type: [String, Number],
				default: 3
			},
			// 未选中文字颜色
			inactiveColor: {
				type: String,
				default: '#666'
			}
		},
		methods: {
			changType(item) {
				this.$emit('tab', item);
			},

		},

	}
</script>

<style>
</style>
